<template>
  <div class="index4 common-box">
    <div class="count-down-times" v-if="endTime>0">{{ endTime }}</div>
    <div class="currentTime">
      <div class="time">
        <span class="dateTime">{{ date }}</span>
        <span class="secondTime">{{ time }}</span>
      </div>
    </div>
    <el-row type="flex">
      <el-col :span="12" class="container-right">
        <div class="title">青岛市政务服务分布图</div>
        <el-row>
          <el-col :span="7">
            <service-times
              :cTitle="'基层便民服务场所总数'"
              :servicesNumsData="servicePlaceArr"
            />
            <div class="panel-left-2 common-panpel">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px 25px 10px 25px">
                <div class="subTit">
                  <img
                    src="../assets/icon/icon-esTrend.png"
                    width="28px"
                  />基层便民服务场所
                </div>
                <div
                  id="myChart_1"
                  :style="{ width: '100%', height: '420px' }"
                ></div>
              </div>
            </div>
            <bar-chart
              :cTitle="'基层便民服务事项数'"
              :vHeight="350"
              :domId="'myChart_2'"
              :barData="barData"
            />
          </el-col>
          <el-col :span="9">
            <div class="panel-middle-1">
              <div class="subTit">
                <i
                  class="el-icon-location-information"
                  style="font-size: 30px"
                ></i
                >政务服务导航图
              </div>
              <zw-map :vHeight="980" />
              <div class="tuli">
                <div>
                  <span style="background: #4649f1"></span>市区级政务服务大厅
                </div>
                <div><span class="zhenjie"></span>镇街级便民服务中心</div>
                <div><i class="el-icon-location"></i>政务服务自助终端网点</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <service-times
              :cTitle="'自助终端累计服务次数'"
              :servicesNumsData="servicesNumsData"
            />
            <graph-chart
              :vHeight="330"
              :domId="'myChart_3'"
              :yData1="diagramData"
              :yData2="diagramLineData"
            />
            <bar-chart
              :cTitle="'各区(市)自助终端基层分布情况'"
              :vHeight="270"
              :cImg="'icon-industryShare.png'"
              :seriesName="seriesName9"
              :domId="'myChart_4'"
              :barData="barData4"
            />
            <div class="panel-left-2 common-panpel col-bom3">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px">
                <div class="subTit">
                  <img
                    src="../assets/icon/icon-enterpriseTotalNum.png"
                    width="28px"
                  />
                  政银合作自助服务情况——<span
                    style="color: #ccff44; font-weight: 600"
                    >{{ zzfwData.dictLabel }}</span
                  >
                </div>
                <el-row>
                  <div class="receptionBox">
                    <el-col :span="8" class="item">
                      <span class="tit">网点数</span>
                      <div class="num">{{ zzfwData.one }}</div>
                    </el-col>
                    <el-col :span="8" class="item">
                      <span class="tit">终端数</span>
                      <div class="num">{{ zzfwData.two }}</div>
                    </el-col>
                    <el-col :span="8" class="item">
                      <span class="tit">可办事项数</span>
                      <div class="num">{{ zzfwData.three }}</div>
                    </el-col>
                  </div>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="container-right">
        <div class="title">青岛市企业设立情况分析</div>
        <el-row>
          <el-col :span="8">
            <progress-bar :growthArr="growthArr" />
            <!-- <pie-chart :companyData="companyData" :domId="'myChart_l1'" /> -->
            <div class="panel-left-2 common-panpel">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px 25px 10px 25px">
                <div class="subTit">
                  <img
                    src="../assets/icon/icon-esTrend.png"
                    width="28px"
                  />网办与窗口占比
                </div>
                <div
                  id="myChart_r1"
                  :style="{ width: '100%', height: '412px' }"
                ></div>
              </div>
            </div>
          </el-col>
          <el-col :span="9" style="padding-left: 20px">
            <el-row>
              <el-col :span="12">
                <div class="usersNum panel-left-2 common-panpel">
                  <div class="angle angle-left-top"></div>
                  <div class="angle angle-left-bottom"></div>
                  <div class="angle angle-right-top"></div>
                  <div class="angle angle-right-bottom"></div>
                  <div style="padding: 15px">
                    <div class="num">{{ companyData.market_num4 }}</div>
                    <div class="tit">市场主体实有用户</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="12" style="padding-left: 20px">
                <div class="usersNum panel-left-2 common-panpel">
                  <div class="angle angle-left-top"></div>
                  <div class="angle angle-left-bottom"></div>
                  <div class="angle angle-right-top"></div>
                  <div class="angle angle-right-bottom"></div>
                  <div style="padding: 15px">
                    <div class="num">{{ companyData.new_market_num4 }}</div>
                    <div class="tit">新登记市场实有用户</div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div
              id="myChart_l2"
              :style="{ width: '100%', height: '600px' }"
            ></div>
            <div class="tuli2">
              <span></span>各区（市）当天注册资本最高的企业
            </div>
            <div class="panel-left-2 common-panpel">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px 25px 0">
                <div class="subTit">
                  <img
                    src="../assets/icon/icon-industryShare.png"
                    width="28px"
                  />新登记企业数据
                </div>
                <div
                  id="myChart_l3"
                  :style="{ width: '100%', height: '218px' }"
                ></div>
              </div>
            </div>
          </el-col>
          <el-col :span="7" style="padding-left: 20px">
            <pie-chart :domId="'myChart_l4'" :companyData="companyDataR4" />

            <div class="panel-left-2 common-panpel">
              <div class="angle angle-left-top"></div>
              <div class="angle angle-left-bottom"></div>
              <div class="angle angle-right-top"></div>
              <div class="angle angle-right-bottom"></div>
              <div style="padding: 25px">
                <div class="subTit">
                  <img
                    src="../assets/icon/icon-enterpriseTotalNum.png"
                    width="28px"
                  />资本占比
                </div>
                <el-row>
                  <el-col :span="8">
                    <liquid-chart
                      v-if="flag"
                      :colorStops="colorStops"
                      :liquidColor="liquidColor"
                      :domId="'myChart_11'"
                      :companyData="this.companyData.capital_proportion3"
                    />
                  </el-col>
                  <el-col :span="8">
                    <liquid-chart
                      v-if="flag"
                      :colorStops="colorStops2"
                      :liquidColor="liquidColor2"
                      :domId="'myChart_12'"
                      :companyData="this.companyData.capital_proportion5"
                    />
                  </el-col>
                  <el-col :span="8">
                    <liquid-chart
                      v-if="flag"
                      :colorStops="colorStops3"
                      :liquidColor="liquidColor3"
                      :domId="'myChart_13'"
                      :companyData="this.companyData.capital_proportion4"
                    />
                  </el-col>
                </el-row>
                <div class="tips">
                  <p>
                    <span class="circle" style="background: #6200d0"></span>
                    <span class="tit">私营企业注册资本总量</span>
                    <span class="num" style="color: #6200d0"
                      >{{ companyData.capital_num3 }}亿元</span
                    >
                  </p>
                  <p>
                    <span class="circle" style="background: #008aff"></span>
                    <span class="tit">个体工商注册资本总量</span>
                    <span class="num" style="color: #008aff"
                      >{{ companyData.capital_num5 }}亿元</span
                    >
                  </p>
                  <p>
                    <span class="circle" style="background: #00ffff"></span>
                    <span class="tit">农民专业合作社注册资本总量</span>
                    <span class="num" style="color: #00ffff"
                      >{{ companyData.capital_num4 }}亿元</span
                    >
                  </p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from "moment";
import BasicCom from "@/components/gov-service/basic-com.vue";
import ZwMap from "@/components/gov-service/zw-map.vue";
import ServiceTimes from "@/components/gov-service/service-times.vue";
import BarChart from "@/components/gov-service/bar-chart.vue";
import GraphChart from "@/components/gov-service/graph-chart.vue";
import EnterpriseEstablishment from "./components/enterprise-establishment.vue";
import ProgressBar from "@/components/enterprise-establishment/progress-bar.vue";
import PieChart from "@/components/enterprise-establishment/pie-chart.vue";
import QDMapJson from "@/assets/echartMap-QD.json";
import LiquidChart from "../components/enterprise-establishment/liquid-chart.vue";
export default {
  components: {
    BasicCom,
    ZwMap,
    ServiceTimes,
    BarChart,
    GraphChart,
    EnterpriseEstablishment,
    ProgressBar,
    PieChart,
    LiquidChart,
  },
  data() {
    return {
      endTime: 0, //倒计时 时间
      date: moment().format("YYYY年MM月DD日"),
      time: moment().format("HH:mm:ss"),
      servicePlaceArr: [], // 基层便民服务场所总数
      servicesNumsData: [], // 自助终端累计服务次数

      bmfwData_x: [], // “基层便民服务场所”x轴数据
      bmfwData_y_zj: [], // “基层便民服务场所”y轴“镇街级”数据
      bmfwData_y_sq: [], // “基层便民服务场所”y轴“社区级”数据

      spdtData_x: [], // “基层便民服务事项数”x轴数据
      spdtData_y_zj: [], // “基层便民服务事项数”y轴“镇街级”数据
      spdtData_y_sq: [], // “基层便民服务事项数”y轴“社区级”数据
      barData: {
        xData: [],
        yData1: [],
        yData2: [],
      }, //传递bar的数据
      barData4: {
        xData: [],
        yData1: [],
        yData2: [],
      },
      seriesName9: ["镇街数", "终端数"],

      diagramData: [], // 关系图数据
      diagramLineData: [], // 关系图line数组数据

      zzzdwdData_x: [], // “各区(市)自助终端基层分布情况”x轴数据
      zzzdwdData_y_zj: [], // “各区(市)自助终端基层分布情况”y轴“镇街数”数据
      zzzdwdData_y_sq: [], // “各区(市)自助终端基层分布情况”y轴“终端数”数据
      zzfwDataArr: [], //  政银合作自助服务情况
      zzfwData: {}, //  政银合作自助服务情况
      bjlJumpTime: 0,
      dataidx: 0,
      // 右侧 青岛市企业设立情况分析
      growthArr: [], // 企业类型占比
      companyData: {},
      big_enterprise_list: [],
      companyDataR4: [], //三大产业数组
      flag: false,
      liquidColor: "#6200D0",
      liquidColor2: "#008AFF",
      liquidColor3: "#00FFFF",
      colorStops: [
        {
          offset: 1,
          color: "rgba(209, 45, 156, 0.8)",
        },
        {
          offset: 0,
          color: "rgba(94, 162, 239, 0.8)",
        },
      ],
      colorStops2: [
        {
          offset: 1,
          color: "rgba(13, 204, 255, 0.8)",
        },
        {
          offset: 0,
          color: "rgba(71, 96, 255, 0.8)",
        },
      ],
      colorStops3: [
        {
          offset: 1,
          color: "rgba(143, 252, 160, 0.8)",
        },
        {
          offset: 0,
          color: "rgba(11, 203, 251, 0.8)",
        },
      ],
    };
  },
  activated() {
    // 获取大厅接待情况数据
    // this.$refs.business.getDtjd()
    // 获取Promise对象的值
    let jumpTmFun = this.GLOBAL.getJumpTime();
    jumpTmFun.then((resData) => {
      this.endTime = resData.data;
      if (this.endTime > 0) {
        // 1.5分钟后跳转到index1大屏
        this.countDownTimes();
      }
    });
  },
  watch: {},
  methods: {
    // 倒计时
    countDownTimes() {
      var interval = setInterval(() => {
        this.endTime -= 1;
        if (this.endTime == -1) {
          this.endTime = 0;
          clearInterval(interval);
          //跳转页面
          this.$router.push({ path: "/" });
        }
      }, 1000);
    },
    // 获取“基层便民服务场所-总数”数据
    getBmfwTotalData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryServiceArena", {
          params: {
            dictType: "convenient_arena",
          },
        })
        .then((res) => {
          let result = res.body.data;
          result === null
            ? (this.servicePlaceArr = [])
            : (this.servicePlaceArr = result.toString().split(""));
        })
        .catch(() => {});
    },
    // 获取“自助终端累计服务次数”数据
    getLjfwcsTotalData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryStatic", {
          params: {
            dictType: "terminal_service_count",
          },
        })
        .then((res) => {
          let result = res.body.data[0].value;
          result === null
            ? (this.servicesNumsData = [])
            : (this.servicesNumsData = result.toString().split(""));
        })
        .catch(() => {});
    },
    // echarts 获取“基层便民服务场所”数据
    getBmfwData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryService", {
          params: {
            dictType: "convenient_arena",
            eparchyCode: "eparchy",
          },
        })
        .then((res) => {
          let result = res.body.data;
          result.map((item) => {
            this.bmfwData_x.push(item.dictLabel);
            this.bmfwData_y_zj.push(item.one);
            this.bmfwData_y_sq.push(item.two);
          });

          this.renderChart_bmfw();
        })
        .catch(() => {});
    },
    // 基层便民服务场所
    renderChart_bmfw() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_1"));
      let option = {
        legend: {
          left: "center",
          bottom: 0,
          itemWidth: 15,
          itemHeight: 11,
          itemGap: 20,
          borderRadius: 4,
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: [
          {
            top: "4%",
            left: "4%",
            width: "35%",
            containLabel: true,
            bottom: "7%",
          },
          {
            top: "2%",
            left: "52%",
            width: "0%",
            bottom: "17%",
          },
          {
            top: "4%",
            right: "5%",
            width: "35%",
            containLabel: true,
            bottom: "5%",
          },
        ],
        xAxis: [
          {
            type: "value",
            inverse: true,
            axisLabel: {
              show: true,
              fontSize: 16,
              color: "#fff",
              fontWeight: 700,
              interval: 0,
              rotate: 35,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(218, 219, 219, 0.1)",
              },
            },
          },
          {
            gridIndex: 1,
            show: true,
          },
          {
            gridIndex: 2,
            type: "value",
            axisLabel: {
              show: true,
              fontSize: 16,
              color: "#fff",
              fontWeight: 700,
              interval: 0,
              rotate: -35,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(218, 219, 219, 0.1)",
              },
            },
          },
        ],
        yAxis: [
          {
            position: "right",
            axisLabel: {
              show: false,
            },
            type: "category",
            inverse: false,
            axisLine: {
              lineStyle: {
                color: "rgba(218, 219, 219, 0.1)",
              },
            },
            axisTick: {
              show: false,
            },
          },
          {
            gridIndex: 1,
            position: "center",
            axisLabel: {
              textStyle: {
                align: "center",
                padding: [15, 0, 0, 0],
                fontSize: 18,
                color: "#fff",
                fontWeight: 700,
              },
            },
            type: "category",
            inverse: false,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            data: this.bmfwData_x,
          },
          {
            gridIndex: 2,
            position: "left",
            axisLabel: {
              show: false,
            },
            type: "category",
            inverse: false,
            axisLine: {
              lineStyle: {
                color: "rgba(218, 219, 219, 0.1)",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "镇(街道)级",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#8FFCA0", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#0BCBFB", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [4, 0, 0, 4],
              },
            },
            label: {
              position: "left",
              show: true,
              fontFamily: "Rubik-Medium",
              fontSize: 18,
              distance: 4,
              color: "#fff",
            },
            data: this.bmfwData_y_zj,
          },
          {
            xAxisIndex: 2,
            yAxisIndex: 2,
            name: "村（社区）级",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#EB4C27", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFBE1E", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [0, 4, 4, 0],
              },
            },
            type: "bar",
            barWidth: 15,
            label: {
              position: "right",
              show: true,
              fontFamily: "Rubik-Medium",
              fontSize: 18,
              distance: 4,
              color: "#fff",
            },
            data: this.bmfwData_y_sq,
          },
        ],
      };
      myChart.setOption(option);
    },

    // 2 获取“基层便民服务事项数”数据
    getSpdtData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryService", {
          params: {
            dictType: "convenient_item",
            eparchyCode: "eparchy",
          },
        })
        .then((res) => {
          let result = res.body.data;
          result.map((item) => {
            this.spdtData_x.push(item.dictLabel);
            this.spdtData_y_zj.push(item.one);
            this.spdtData_y_sq.push(item.two);
          });
          this.barData.xData = this.spdtData_x;
          this.barData.yData1 = this.spdtData_y_zj;
          this.barData.yData2 = this.spdtData_y_sq;
        })
        .catch(() => {});
    },

    // 3 获取“关系图”数据
    getDiagramData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/handling/queryBusiness", {})
        .then((res) => {
          let result = res.body.data;
          let arr_data = [];
          let arr_line = [];
          result.map((item) => {
            // 关系图data数组数据
            let obj = {
              name: item.business,
              draggable: false, // 是否可以拖动
              category: 1,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: "#005bb0",
                    },
                    {
                      offset: 1,
                      color: "#4796f6",
                    },
                  ]),
                },
              },
            };
            arr_data.push(obj);

            // 连线数组
            let obj_line = {
              target: item.business,
              source: result[0].business,
            };
            arr_line.push(obj_line);
          });

          // 配置中心圆样式及位置
          (arr_data[0].symbolSize = [200, 80]), // 设置椭圆形大小
            (arr_data[0].label = {
              // 设置椭圆形大小
              normal: {
                show: true,
                position: "inside",
                textStyle: {
                  fontSize: 22,
                  fontWeight: 700,
                  color: "#040f3d", // 字体颜色
                },
              },
            }),
            (arr_data[0].itemStyle = {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "#35c2ff",
                  },
                  {
                    offset: 1,
                    color: "#96f6ff",
                  },
                ]),
              },
            });
          arr_data[0].x = 320;
          arr_data[0].y = 160;

          // 配置周围圆位置
          arr_data[1].x = 380;
          arr_data[1].y = 220;
          arr_data[2].x = 240;
          arr_data[2].y = 220;
          arr_data[3].x = 480;
          arr_data[3].y = 160;
          arr_data[4].x = 160;
          arr_data[4].y = 160;
          arr_data[5].x = 380;
          arr_data[5].y = 90;
          arr_data[6].x = 240;
          arr_data[6].y = 90;

          this.diagramData = arr_data;
          this.diagramLineData = arr_line;
        })
        .catch(() => {});
    },
    // 4 获取“各区(市)自助终端基层分布情况”数据
    getSelfServiceMachineData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryService", {
          params: {
            dictType: "terminal_basic",
            eparchyCode: "eparchy",
          },
        })
        .then((res) => {
          let result = res.body.data;

          result.map((item) => {
            this.zzzdwdData_x.push(item.dictLabel);
            this.zzzdwdData_y_zj.push(item.one);
            this.zzzdwdData_y_sq.push(item.two);
          });
          this.barData4.xData = this.zzzdwdData_x;
          this.barData4.yData1 = this.zzzdwdData_y_zj;
          this.barData4.yData2 = this.zzzdwdData_y_sq;
        })
        .catch(() => {});
    },
    // 获取 政银合作自助服务情况 切换时间
    getBjlJumpTime() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/params", {
          params: {
            paramCode: 1006,
          },
        })
        .then((res) => {
          let result = res.body.data;
          this.bjlJumpTime = result;
          this.$nextTick(() => {
            this.changeData();
          });
        })
        .catch(() => {});
    },
    // 政银合作自助服务情况
    getZzfwData() {
      this.$http
        .get(window.SITE_CONFIG.apiURL + "/static/queryService", {
          params: {
            dictType: "service_bank",
            eparchyCode: "terminal_service_bank",
          },
        })
        .then((res) => {
          let result = res.body.data;
          this.zzfwDataArr = result;
          this.zzfwData = result[0];
          this.getBjlJumpTime();
        })
        .catch(() => {});
    },
    changeData() {
      setInterval(() => {
        this.dataidx = this.dataidx === 2 ? 0 : this.dataidx + 1;
        this.zzfwData = this.zzfwDataArr[this.dataidx];
      }, 1000 * this.bjlJumpTime);
    },
    // 右侧
    // 获取青岛市企业设立情况分析数据
    getCompanyData() {
      this.$http
        .post(window.SITE_CONFIG.apiURL + "/enterprise", {})
        .then((res) => {
          this.companyData = res.body.result;
          this.growthArr = [
            {
              title: "内资企业",
              progress: this.companyData.enterprise_proportion1,
            },
            {
              title: "外商投资企业",
              progress: this.companyData.enterprise_proportion2,
            },
            {
              title: "私营企业",
              progress: this.companyData.enterprise_proportion3,
            },
            {
              title: "农民专业合租社",
              progress: this.companyData.enterprise_proportion4,
            },
            {
              title: "个体工商户",
              progress: this.companyData.enterprise_proportion5,
            },
          ];

          this.companyData.capital_num3 = (
            res.body.result.capital_num3 / 10000
          ).toFixed(2);
          this.companyData.capital_num4 = (
            res.body.result.capital_num4 / 10000
          ).toFixed(2);
          this.companyData.capital_num5 = (
            res.body.result.capital_num5 / 10000
          ).toFixed(2);
          // 三大产业数组
          this.companyDataR4 = [];
          this.companyDataR4.push(
            {
              value: this.companyData.first_industry_proportion,
              name: "第一产业",
            },
            {
              value: this.companyData.second_industry_proportion,
              name: "第二产业",
            },
            {
              value: this.companyData.third_industry_proportion,
              name: "第三产业",
            }
          );
          // this.companyDataR4.push({
          //   value: this.companyData.second_industry_proportion,
          //   name: "第二产业",
          // });
          // this.companyDataR4.push({
          //   value: this.companyData.third_industry_proportion,
          //   name: "第三产业",
          // });
          this.flag = true;
          this.renderChart_esType();
          // this.renderChart_industryShare()
          this.renderChart_cityCompanyNum();

          // this.renderChart_syqy();
          // this.renderChart_gtgs();
          // this.renderChart_nnhzs();
        })
        .catch(() => {});
    },
    // 网办与窗口占比
    renderChart_esType() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_r1"));
      // let totalNum = 7516
      // 绘制图表
      const option = {
        legend: {
          // orient: 'vertical',
          y: "88%", // 图例上下居中
          data: ["网上办理总数", "窗口办理总数"],
          textStyle: {
            color: "#ffffff",
            fontSize: 24,
          },
          icon: "circle", //  这个字段控制形状  类型包括 circle， rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 20, // 设置宽度
          itemHeight: 20, // 设置高度
          itemGap: 10, // 设置间距
        },
        color: ["#00A0E9", "#f19e39"], //
        series: [
          {
            // 内边框的设置
            radius: ['25%', '26%'],
            center: ['50%', '45%'],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#00DEFF",
              },
            },
            data: [{ value: 1 }],
          },
          {
            name: "",
            type: "pie",
            radius: ['30%', '60%'],
            center: ["50%", "45%"],
            label: {
              normal: {
                formatter: (params) => {
                  return `${params.name}\n${
                    params.value
                  }户 (${params.percent.toFixed(2)}%)`;
                },
                color: "#fff",
                fontSize: 20,
                // padding: [0, -5, 0, -5],
              },
            },
            data: [
              { value: this.companyData.net_num, name: "网上办理总数" },
              { value: this.companyData.window_num, name: "窗口办理总数" },
            ],
          },
          {
            // 外边框的设置
            radius: ['70%', '71%'],
            center: ["50%", "45%"],
            type: "pie",
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            animation: false,
            tooltip: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#13355c",
              },
            },
            data: [{ value: 1 }],
          },
        ],
      };
      myChart.setOption(option);
    },
    // 青岛各区市地图
    renderChart_QDMap() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_l2"));

      this.$echarts.registerMap("qingdao", QDMapJson);

      let option = {
        geo: {
          show: true,
          map: "qingdao",
          label: {
            normal: {
              show: false,
              color: "#fff",
            },
            emphasis: {
              show: false,
              color: "#fff",
            },
          },
          zoom: 1.25,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: "#060f39",
              borderWidth: 1,
              borderColor: "#016BBC",
            },
            emphasis: {
              areaColor: "rgba(107, 176, 207, .6)",
            },
          },
        },
        series: [
          {
            type: "effectScatter",
            symbol: "pin",
            symbolSize: 22,
            coordinateSystem: "geo",
            geoIndex: 0,
            data: [],
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  return "{fline|" + params.data.name + "}";
                },
                position: "top",
                backgroundColor: "rgba(254, 174, 33, .85)",
                padding: [0, 0],
                borderRadius: 3,
                lineHeight: 32,
                color: "#f7fafb",
                rich: {
                  fline: {
                    padding: [10, 10, 10, 10],
                    color: "#ffffff",
                    fontWeight: 700,
                    fontSize: 18,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#e93f42",
                shadowBlur: 8,
                shadowColor: "#f00",
              },
            },
          },
          {
            type: "map",
            mapType: "qingdao",
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: 16,
                  fontWeight: 700,
                },
                formatter: function (val) {
                  let { name, value } = val;
                  return `${name}`;
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#9dc6d6",
                areaColor: "rgba(78, 159, 202, .8)",
              },
              emphasis: {
                areaColor: "#6bb0cf",
              },
            },
            animation: false,
            data: [
              { name: "市北区", value: 1 },
              { name: "市南区", value: 1 },
              { name: "李沧区", value: 1 },
              { name: "西海岸新区", value: 1 },
              { name: "城阳区", value: 1 },
              { name: "崂山区", value: 1 },
              { name: "即墨区", value: 1 },
              { name: "胶州市", value: 1 },
              { name: "平度市", value: 1 },
              { name: "莱西市", value: 1 },
            ],
          },
        ],
        visualMap: {
          show: false,
          x: "left",
          y: "center",
          seriesIndex: [1],
          min: 0,
          max: 500,
          text: ["高", "低"], // 文本，默认为数值文本
          textStyle: {
            color: "#fff",
          },
          inRange: {
            color: ["#284BF7"],
          },
        },
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
      var timer = setInterval(() => {
        //数据情况重绘，清除formatter移动效果，也可根据自身需求是否需要，删除这两行代码
        /*option.series[seriesjson[runidx].createType-1].data = [];
        myChart.setOption(option, true);*/
        let len = this.big_enterprise_list.length;
        let dataidx = Math.floor(Math.random() * len);
        let name = this.big_enterprise_list[dataidx].name;
        let address = this.big_enterprise_list[dataidx].address;
        let valarr = this.big_enterprise_list[dataidx].value;
        option.series[0].data = [
          {
            name: name,
            address: address,
            value: valarr,
          },
        ];
        myChart.setOption(option, true);
      }, 3000);
    },
    // 获取地图数据
    getMapData() {
      this.$http
        .post(window.SITE_CONFIG.apiURL + "/enterprise-location", {})
        .then((res) => {
          let arr = [];
          res.body.map((item) => {
            if (item.location !== undefined) {
              arr.push({
                name: item.enterprise_name,
                address: item.enterprise_address,
                value: item.location.split(","),
              });
            }
          });
          this.big_enterprise_list = arr;
          this.renderChart_QDMap();
        })
        .catch(() => {});
    },
    // 各市区入驻企业数
    renderChart_cityCompanyNum() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart_l3"));

      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "8%",
          right: "0%",
          left: "0%",
          bottom: "20%",
        },
        xAxis: [
          {
            type: "category",
            data: [
              "工商登记",
              "税务登记",
              "刻制印章",
              "社保办理",
              "医保办理",
              "公积金办理",
            ],
            axisLabel: {
              margin: 45,
              color: "#fff",
              textStyle: {
                fontSize: 22,
              },
              interval: 0,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            show: false,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: "bar",
            zlevel: 1,
            data: [
              this.companyData.new_enterprise_num1,
              this.companyData.new_enterprise_num2,
              this.companyData.new_enterprise_num3,
              this.companyData.new_enterprise_num4,
              this.companyData.new_enterprise_num5,
              this.companyData.new_enterprise_num6,
            ],
            barWidth: "20px",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#00FFFF", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#00AFF8", // 100% 处的颜色
                    },
                  ],
                  false
                ),
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            label: {
              normal: {
                formatter: "{c}个",
                show: true,
                color: "#fff",
                fontSize: 24,
                position: "bottom",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    dateTimeChange() {
      var b = setInterval(() => {
        this.time = moment().format("HH:mm:ss");
        clearInterval(b);
        this.dateTimeChange();
      }, 1000);
    },
  },
  created() {},
  mounted() {
    this.dateTimeChange();
    this.getBmfwTotalData(); // 获取“基层便民服务场所-总数”数据
    this.getLjfwcsTotalData(); // 获取“自助终端累计服务次数”数据
    this.getSpdtData(); // 获取“基层便民服务事项数”数据
    this.getBmfwData(); // echarts 获取“基层便民服务场所”数据
    this.getDiagramData(); // 获取“关系图”数据
    this.getSelfServiceMachineData(); // 获取“各区(市)自助终端基层分布情况”数据
    this.getZzfwData(); // 政银合作自助服务情况
    console.log("父组件??");
    this.getCompanyData(); // 获取企业设立情况分析数据
    this.getMapData(); // 获取地图数据
  },
};
</script>
<style lang='scss' scoped>
@import "@/styles/index4.scss";
</style>